<template>
<div class='comment'>
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容（最多120字）" maxlength="120" v-model=contentmsg ></textarea>
    <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
    <div class="cmt-container">
        <div class="cmt" v-for='(item,i) in comments' :key="item.add_time">
            <div class="cmt-title">
                第{{ i+1 }}楼&nbsp;&nbsp;
                用户：{{item.user_name }}&nbsp;&nbsp;
                发表时间：{{item.add_time | dateFormat}}
            </div>
            <div class="cmt-con">
                {{item.content == undefined ? '该用户很懒': item.content}}
            </div>
        </div> 
        <mt-button type="danger" size="large" @click="morecomments">加载更多</mt-button>
    </div>
    
</div>
</template>
<script>
import { Toast } from "mint-ui"
export default {
    data(){
        return {
            pageindex:1,
            comments:[],
            contentmsg:'',
            postdown:false
        }
    },
    created(){
        this.getcomments()
    },
    methods:{
        getcomments(){
            this.$http.get('api/getcomments/' + this.artid + '?pageindex=' + this.pageindex +'&type=' + this.type).then(response=>{
                if(response.body.status === 0 ){
                     Toast({message:"新闻评论获取ok",duration:500})
                     this.comments= this.comments.concat(response.body.message)
                     this.contentmsg = ''
                }else{
                    Toast({message:"新闻评论获取fail",duration:500})
                }
            })
        },
        morecomments(){
            this.pageindex++
            this.getcomments()
        },
        postcomment(){
            // 检验数据是否为空
            if(this.contentmsg.trim().length === 0)
            return Toast({message:"你输入的内容为空"})
            //发送数据
            this.$http.post("api/postcomment/"+this.artid ,{
                content:this.contentmsg,
                type:this.type
            }).then(response=>{
                if(response.body.status == 0){
                    // Toast({message:"发送评论成功",duration:1000})
                    this.comments.unshift({user_name:"匿名用户",add_time:Date.now()/1000,content:this.contentmsg})
                    this.contentmsg = ''
                }
                else{
                    return Toast({message:"发送评论失败",duration:1000})
                }
            })

        }
    },
    props:['artid','type']
}
</script>
<style lang="scss" scoped>
.comment{
    h3{
        font-size:18px;
    }
    textarea{
        height:100px;
        font-size:13px;
        margin-bottom:5px;
    }
    .cmt-container{
        margin:5px 0;
        .cmt{
            .cmt-title{
                background-color:#ddd;
                font-size:12px;
                padding:5px 5px;
            }
            .cmt-con{
                font-size:14px;
                text-indent:2em;
                
                line-height:28px;
                
            }
        }
        
    }
}
</style>